import React, { useMemo } from 'react';
import styled from './index.module.css';
import { Checkbox } from 'antd';
import CartItem from '../cartItem';
import { CartContainerProps } from '../../types';
export default function CartContainer({
    cartList,
    selectAll,
    selectItem,
    changeNum,
    showSelect = true,
}: CartContainerProps) {
    const isSelectAll = useMemo(() => {
        return cartList.every((item) => {
            return item.is_select;
        });
    }, [cartList]);
    const selectItemContainer = (id: string, checked: boolean) => {
        selectItem && selectItem(id, checked);
    };
    const changeNumContainer = (id: string, value: number) => {
        changeNum && changeNum(id, value);
    };
    const selectAllContainer = (e: any) => {
        selectAll && selectAll(e);
    };
    return (
        <>
            <div className={styled.header}>
                <div className={styled.checkbox}>
                    {showSelect && (
                        <Checkbox checked={isSelectAll} onChange={selectAllContainer}>
                            全选
                        </Checkbox>
                    )}
                </div>
                <div className={styled.headerinfo}>Goods Info</div>
                <div className={styled.headerprop}></div>
                <div className={styled.headerPrice}>Price</div>
                <div className={styled.headerNum}>Count</div>
                <div className={styled.headerItemPrice}>Amount</div>
                <div className={styled.headerOperate}>
                    {showSelect && <span>操作</span>}
                </div>
            </div>
            <div className={styled.cartContainer}>
                {cartList.map((item, index) => {
                    return (
                        <CartItem
                            selectItem={selectItemContainer}
                            changeNum={changeNumContainer}
                            key={index}
                            cart={item}
                            showSelect={showSelect}
                        ></CartItem>
                    );
                })}
            </div>
        </>
    );
}
